<template>
  <div class="box">
    <!-- 左上角图标 -->
    <el-icon>
      <Fold />
    </el-icon>
    <!-- 标题 -->
    <h3>外卖管理系统</h3>
    <!-- 右上角 菜单 -->
    <el-dropdown split-button type="primary">
      欢迎：管理员
      <template #dropdown>
        <el-dropdown-menu>
          <!-- 菜单项 -->
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item>修改密码</el-dropdown-item>
          <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  methods: {
    handleLogout() {
      // 清除本地存储中的登录信息
      localStorage.removeItem('loginInfo');
      // 跳转到登录页面
      this.$router.push('/businessLogin');
    },
  },
};
</script>

<style scoped>
.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.box h3 {
  font-size: 30px;
  color: #fff;
  letter-spacing: 1em;
}
</style>